<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!--
BeyondAdmin - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.2.0
Version: 1.0.0
Purchase: http://wrapbootstrap.com
-->

<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Head -->
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<head>
    <meta charset="utf-8" />
    <title>查询管理员用户信息</title>
	
    <meta name="description" content="Dashboard" />
    <meta name="description" content="data tables" />
    <meta name="description" content="Form Elements Data Pickers" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="<%=request.getContextPath()%>/commonadmin/assets/img/favicon.png" type="image/x-icon">


    <!--Basic Styles-->
    <link href="<%=request.getContextPath()%>/commonadmin/assets/css/bootstrap.min.css" rel="stylesheet" />
    <link id="bootstrap-rtl-link" href="" rel="stylesheet" />
    <link href="<%=request.getContextPath()%>/commonadmin/assets/css/font-awesome.min.css" rel="stylesheet" />
    <link href="<%=request.getContextPath()%>/commonadmin/assets/css/weather-icons.min.css" rel="stylesheet" />

    <!--Fonts-->
    <link href="<%=request.getContextPath()%>/commonadmin/js/font-useso.js" rel="stylesheet" type="text/css">

    <!--Beyond styles-->
    <link  href="<%=request.getContextPath()%>/commonadmin/assets/css/beyond.min.css" rel="stylesheet" />
    <link href="<%=request.getContextPath()%>/commonadmin/assets/css/demo.min.css" rel="stylesheet" />
    <link href="<%=request.getContextPath()%>/commonadmin/assets/css/typicons.min.css" rel="stylesheet" />
    <link href="<%=request.getContextPath()%>/commonadmin/assets/css/animate.min.css" rel="stylesheet" />
    <link id="skin-link" href="" rel="stylesheet" type="text/css" />
	
	<!--Page Related styles-->
    <link href="<%=request.getContextPath()%>/commonadmin/assets/css/dataTables.bootstrap.css" rel="stylesheet" />
	
    <!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/skins.min.js"></script>
</head>
<!-- /Head -->
<!-- Body -->
<body>
    <!-- Loading Container -->
    <div class="loading-container">
        <div class="loading-progress">
            <div class="rotator">
                <div class="rotator">
                    <div class="rotator colored">
                        <div class="rotator">
                            <div class="rotator colored">
                                <div class="rotator colored"></div>
                                <div class="rotator"></div>
                            </div>
                            <div class="rotator colored"></div>
                        </div>
                        <div class="rotator"></div>
                    </div>
                    <div class="rotator"></div>
                </div>
                <div class="rotator"></div>
            </div>
            <div class="rotator"></div>
        </div>
    </div>
    <!--  /Loading Container -->
    <!-- Navbar -->
    <%@ include file="/commonadmin/include/admin-navbar.jsp"%>
    <!-- /Navbar -->
    <!-- Main Container -->
    <div class="main-container container-fluid">
        <!-- Page Container -->
        <div class="page-container">
            <!-- Page Sidebar -->
			<%@ include file="/commonadmin/include/admin-pageSidebar.jsp"%>
            <!-- /Page Sidebar -->
            <!-- Page Content -->
            <div class="page-content">
                
                <!-- /Page Breadcrumb -->
                <!-- Page Header -->
                <div class="page-header position-relative">
                    <div class="header-title">
                        <h1>
                            管理员
                        </h1>
						<i class="fa fa-angle-right"></i>查询用户信息
                    </div>
                    <!--Header Buttons-->
                    <div class="header-buttons">
                        <a class="sidebar-toggler" href="#">
                            <i class="fa fa-arrows-h"></i>
                        </a>
                        <a class="refresh" id="refresh-toggler" href="">
                            <i class="glyphicon glyphicon-refresh"></i>
                        </a>
                        <a class="fullscreen" id="fullscreen-toggler" href="#">
                            <i class="glyphicon glyphicon-fullscreen"></i>
                        </a>
                    </div>
                    <!--Header Buttons End-->
                </div>
                <!-- Page Body -->
                <div class="page-body">
                    <div class="row">
                        <div class="col-xs-12 col-md-12">
                            <div class="widget">
                                <div class="widget-header bordered-bottom bordered-yellow">
                                    <span class="widget-caption">用户信息</span>
									
                                    <div class="widget-buttons">
                                        <a href="#" data-toggle="maximize">
                                            <i class="fa fa-expand"></i>
                                        </a>
                                        <a href="#" data-toggle="collapse">
                                            <i class="fa fa-minus"></i>
                                        </a>
                                        <a href="#" data-toggle="dispose">
                                            <i class="fa fa-times"></i>
                                        </a>
                                    </div>
                                </div>
								
                                <div class="widget-body no-padding">
                                    <table class="table table-bordered table-hover table-striped" id="searchable">
                                        <thead class="bordered-darkorange">
                                            <tr role="row">
                                                <th>管理员ID</th>
                                                <th>管理员名</th>
                                                <th>修改管理员信息</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            <c:forEach items="${list }" var="userList">
	                                            <tr>
	                                                <td class=" sorting_1">
	                                                	${userList.manager_id }
	                                                </td>
	                                                <td class=" ">
	                                                	${userList.username }
	                                                </td>
	                                                <td class=" ">
	                                                	<a href="<%=request.getContextPath()%>/admin/toRevisePasswords.htm?manager_id=${userList.manager_id }" target="_blank" style="text-decoration:none;color:red;">
	                                                		修改信息
	                                                	</a>
	                                                </td>
	                                            </tr>
                                            </c:forEach>
                                        </tbody>
                                    </table>
									
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /Page Body -->
            </div>
            <!-- /Page Content -->
        </div>
        <!-- /Page Container -->
    </div>
        <!-- Main Container -->


    <!--Basic Scripts-->
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/jquery-2.0.3.min.js"></script>
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/bootstrap.min.js"></script>
	<script src="<%=request.getContextPath()%>/commonadmin/component/jquery/jquery.cookie.js"></script>
	<script src="<%=request.getContextPath()%>/commonadmin/js/adminCookie.js"></script>
    <!--Beyond Scripts-->
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/beyond.min.js"></script>
    
	<!--Page Related Scripts-->
    <!--Sparkline Charts Needed Scripts-->
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/sparkline/jquery.sparkline.js"></script>
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/sparkline/sparkline-init.js"></script>
	
	<!--Easy Pie Charts Needed Scripts-->
    <script src="<%=request.getContextPath()%>/commonadmin/	assets/js/charts/easypiechart/jquery.easypiechart.js"></script>
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/easypiechart/easypiechart-init.js"></script>

    <!--Flot Charts Needed Scripts-->
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/flot/jquery.flot.js"></script>
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/flot/jquery.flot.resize.js"></script>
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/flot/jquery.flot.pie.js"></script>
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/flot/jquery.flot.tooltip.js"></script>
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/flot/jquery.flot.orderBars.js"></script>
	
    <!--Page Related Scripts-->
    <!--Sparkline Charts Needed Scripts-->
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/sparkline/jquery.sparkline.js"></script>
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/sparkline/sparkline-init.js"></script>

    <!--Easy Pie Charts Needed Scripts-->
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/easypiechart/jquery.easypiechart.js"></script>
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/easypiechart/easypiechart-init.js"></script>

    <!--Flot Charts Needed Scripts-->
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/flot/jquery.flot.js"></script>
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/flot/jquery.flot.resize.js"></script>
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/flot/jquery.flot.pie.js"></script>
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/flot/jquery.flot.tooltip.js"></script>
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/charts/flot/jquery.flot.orderBars.js"></script>
	
	<!--Page Related Scripts-->
    <!--Jquery Select2-->
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/select2/select2.js"></script>
    <!--Bootstrap Tags Input-->
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/tagsinput/bootstrap-tagsinput.js"></script>
	<!--Bootstrap Date Picker-->
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/datetime/bootstrap-datepicker.js"></script>

    <!--Bootstrap Time Picker-->
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/datetime/bootstrap-timepicker.js"></script>

    <!--Bootstrap Date Range Picker-->
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/datetime/moment.js"></script>
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/datetime/daterangepicker.js"></script>
	
	<!--Jquery Autosize-->
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/textarea/jquery.autosize.js"></script>

    <!--Fuelux Spinner-->
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/fuelux/spinner/fuelux.spinner.min.js"></script>

    <!--jQUery MiniColors-->
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/colorpicker/jquery.minicolors.js"></script>

    <!--jQUery Knob-->
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/knob/jquery.knob.js"></script>

    <!--noUiSlider-->
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/slider/jquery.nouislider.js"></script>

    <!--jQRangeSlider-->
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/jquery-ui-1.10.4.custom.js"></script>
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/slider/jQRangeSlider/jQAllRangeSliders-withRuler-min.js"></script>

    <!--Page Related Scripts-->
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/datatable/jquery.dataTables.min.js"></script>
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/datatable/ZeroClipboard.js"></script>
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/datatable/dataTables.tableTools.min.js"></script>
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/datatable/dataTables.bootstrap.min.js"></script>
    <script src="<%=request.getContextPath()%>/commonadmin/assets/js/datatable/datatables-init.js"></script>
    <script>
        InitiateSimpleDataTable.init();
        InitiateEditableDataTable.init();
        InitiateExpandableDataTable.init();
        InitiateSearchableDataTable.init();
    </script>
    <script>
        // If you want to draw your charts with Theme colors you must run initiating charts after that current skin is loaded
        $(window).bind("load", function () {

            /*Sets Themed Colors Based on Themes*/
            themeprimary = getThemeColorFromCss('themeprimary');
            themesecondary = getThemeColorFromCss('themesecondary');
            themethirdcolor = getThemeColorFromCss('themethirdcolor');
            themefourthcolor = getThemeColorFromCss('themefourthcolor');
            themefifthcolor = getThemeColorFromCss('themefifthcolor');

            //Sets The Hidden Chart Width
            $('#dashboard-bandwidth-chart')
                .data('width', $('.box-tabbs')
                    .width() - 20);

            //-------------------------Visitor Sources Pie Chart----------------------------------------//
            var data = [
                {
                    data: [[1, 21]],
                    color: '#fb6e52'
                },
                {
                    data: [[1, 12]],
                    color: '#e75b8d'
                },
                {
                    data: [[1, 11]],
                    color: '#a0d468'
                },
                {
                    data: [[1, 10]],
                    color: '#ffce55'
                },
                {
                    data: [[1, 46]],
                    color: '#5db2ff'
                }
            ];
            var placeholder = $("#dashboard-pie-chart-sources");
            placeholder.unbind();

            $.plot(placeholder, data, {
                series: {
                    pie: {
                        innerRadius: 0.45,
                        show: true,
                        stroke: {
                            width: 4
                        }
                    }
                }
            });

            //------------------------------Visit Chart------------------------------------------------//
            var data2 = [{
                color: themesecondary,
                label: "Direct Visits",
                data: [[3, 2], [4, 5], [5, 4], [6, 11], [7, 12], [8, 11], [9, 8], [10, 14], [11, 12], [12, 16], [13, 9],
                [14, 10], [15, 14], [16, 15], [17, 9]],

                lines: {
                    show: true,
                    fill: true,
                    lineWidth: .1,
                    fillColor: {
                        colors: [{
                            opacity: 0
                        }, {
                            opacity: 0.4
                        }]
                    }
                },
                points: {
                    show: false
                },
                shadowSize: 0
            },
                {
                    color: themeprimary,
                    label: "Referral Visits",
                    data: [[3, 10], [4, 13], [5, 12], [6, 16], [7, 19], [8, 19], [9, 24], [10, 19], [11, 18], [12, 21], [13, 17],
                    [14, 14], [15, 12], [16, 14], [17, 15]],
                    bars: {
                        order: 1,
                        show: true,
                        borderWidth: 0,
                        barWidth: 0.4,
                        lineWidth: .5,
                        fillColor: {
                            colors: [{
                                opacity: 0.4
                            }, {
                                opacity: 1
                            }]
                        }
                    }
                },
                {
                    color: themethirdcolor,
                    label: "Search Engines",
                    data: [[3, 14], [4, 11], [5, 10], [6, 9], [7, 5], [8, 8], [9, 5], [10, 6], [11, 4], [12, 7], [13, 4],
                    [14, 3], [15, 4], [16, 6], [17, 4]],
                    lines: {
                        show: true,
                        fill: false,
                        fillColor: {
                            colors: [{
                                opacity: 0.3
                            }, {
                                opacity: 0
                            }]
                        }
                    },
                    points: {
                        show: true
                    }
                }
            ];
            var options = {
                legend: {
                    show: false
                },
                xaxis: {
                    tickDecimals: 0,
                    color: '#f3f3f3'
                },
                yaxis: {
                    min: 0,
                    color: '#f3f3f3',
                    tickFormatter: function (val, axis) {
                        return "";
                    },
                },
                grid: {
                    hoverable: true,
                    clickable: false,
                    borderWidth: 0,
                    aboveData: false,
                    color: '#fbfbfb'

                },
                tooltip: true,
                tooltipOpts: {
                    defaultTheme: false,
                    content: " <b>%x May</b> , <b>%s</b> : <span>%y</span>",
                }
            };
            var placeholder = $("#dashboard-chart-visits");
            var plot = $.plot(placeholder, data2, options);

            //------------------------------Real-Time Chart-------------------------------------------//
            var data = [],
                totalPoints = 300;

            function getRandomData() {

                if (data.length > 0)
                    data = data.slice(1);

                // Do a random walk

                while (data.length < totalPoints) {

                    var prev = data.length > 0 ? data[data.length - 1] : 50,
                        y = prev + Math.random() * 10 - 5;

                    if (y < 0) {
                        y = 0;
                    } else if (y > 100) {
                        y = 100;
                    }

                    data.push(y);
                }

                // Zip the generated y values with the x values

                var res = [];
                for (var i = 0; i < data.length; ++i) {
                    res.push([i, data[i]]);
                }

                return res;
            }
            // Set up the control widget
            var updateInterval = 100;
            var plot = $.plot("#dashboard-chart-realtime", [getRandomData()], {
                yaxis: {
                    color: '#f3f3f3',
                    min: 0,
                    max: 100,
                    tickFormatter: function (val, axis) {
                        return "";
                    }
                },
                xaxis: {
                    color: '#f3f3f3',
                    min: 0,
                    max: 100,
                    tickFormatter: function (val, axis) {
                        return "";
                    }
                },
                colors: [themeprimary],
                series: {
                    lines: {
                        lineWidth: 0,
                        fill: true,
                        fillColor: {
                            colors: [{
                                opacity: 0.5
                            }, {
                                opacity: 0
                            }]
                        },
                        steps: false
                    },
                    shadowSize: 0
                },
                grid: {
                    hoverable: true,
                    clickable: false,
                    borderWidth: 0,
                    aboveData: false
                }
            });

            function update() {

                plot.setData([getRandomData()]);

                plot.draw();
                setTimeout(update, updateInterval);
            }
            update();


            //-------------------------Initiates Easy Pie Chart instances in page--------------------//
            InitiateEasyPieChart.init();

            //-------------------------Initiates Sparkline Chart instances in page------------------//
            InitiateSparklineCharts.init();
        });

    </script>
    
	
	<script>
        // If you want to draw your charts with Theme colors you must run initiating charts after that current skin is loaded
        $(window).bind("load", function () {

            /*Sets Themed Colors Based on Themes*/
            themeprimary = getThemeColorFromCss('themeprimary');
            themesecondary = getThemeColorFromCss('themesecondary');
            themethirdcolor = getThemeColorFromCss('themethirdcolor');
            themefourthcolor = getThemeColorFromCss('themefourthcolor');
            themefifthcolor = getThemeColorFromCss('themefifthcolor');

            //Sets The Hidden Chart Width
            $('#dashboard-bandwidth-chart')
                .data('width', $('.box-tabbs')
                    .width() - 20);

            //-------------------------Visitor Sources Pie Chart----------------------------------------//
            var data = [
                {
                    data: [[1, 21]],
                    color: '#fb6e52'
                },
                {
                    data: [[1, 12]],
                    color: '#e75b8d'
                },
                {
                    data: [[1, 11]],
                    color: '#a0d468'
                },
                {
                    data: [[1, 10]],
                    color: '#ffce55'
                },
                {
                    data: [[1, 46]],
                    color: '#5db2ff'
                }
            ];
            var placeholder = $("#dashboard-pie-chart-sources");
            placeholder.unbind();

            $.plot(placeholder, data, {
                series: {
                    pie: {
                        innerRadius: 0.45,
                        show: true,
                        stroke: {
                            width: 4
                        }
                    }
                }
            });

            //------------------------------Visit Chart------------------------------------------------//
            var data2 = [{
                color: themesecondary,
                label: "Direct Visits",
                data: [[3, 2], [4, 5], [5, 4], [6, 11], [7, 12], [8, 11], [9, 8], [10, 14], [11, 12], [12, 16], [13, 9],
                [14, 10], [15, 14], [16, 15], [17, 9]],

                lines: {
                    show: true,
                    fill: true,
                    lineWidth: .1,
                    fillColor: {
                        colors: [{
                            opacity: 0
                        }, {
                            opacity: 0.4
                        }]
                    }
                },
                points: {
                    show: false
                },
                shadowSize: 0
            },
                {
                    color: themeprimary,
                    label: "Referral Visits",
                    data: [[3, 10], [4, 13], [5, 12], [6, 16], [7, 19], [8, 19], [9, 24], [10, 19], [11, 18], [12, 21], [13, 17],
                    [14, 14], [15, 12], [16, 14], [17, 15]],
                    bars: {
                        order: 1,
                        show: true,
                        borderWidth: 0,
                        barWidth: 0.4,
                        lineWidth: .5,
                        fillColor: {
                            colors: [{
                                opacity: 0.4
                            }, {
                                opacity: 1
                            }]
                        }
                    }
                },
                {
                    color: themethirdcolor,
                    label: "Search Engines",
                    data: [[3, 14], [4, 11], [5, 10], [6, 9], [7, 5], [8, 8], [9, 5], [10, 6], [11, 4], [12, 7], [13, 4],
                    [14, 3], [15, 4], [16, 6], [17, 4]],
                    lines: {
                        show: true,
                        fill: false,
                        fillColor: {
                            colors: [{
                                opacity: 0.3
                            }, {
                                opacity: 0
                            }]
                        }
                    },
                    points: {
                        show: true
                    }
                }
            ];
            var options = {
                legend: {
                    show: false
                },
                xaxis: {
                    tickDecimals: 0,
                    color: '#f3f3f3'
                },
                yaxis: {
                    min: 0,
                    color: '#f3f3f3',
                    tickFormatter: function (val, axis) {
                        return "";
                    },
                },
                grid: {
                    hoverable: true,
                    clickable: false,
                    borderWidth: 0,
                    aboveData: false,
                    color: '#fbfbfb'

                },
                tooltip: true,
                tooltipOpts: {
                    defaultTheme: false,
                    content: " <b>%x May</b> , <b>%s</b> : <span>%y</span>",
                }
            };
            var placeholder = $("#dashboard-chart-visits");
            var plot = $.plot(placeholder, data2, options);

            //------------------------------Real-Time Chart-------------------------------------------//
            var data = [],
                totalPoints = 300;

            function getRandomData() {

                if (data.length > 0)
                    data = data.slice(1);

                // Do a random walk

                while (data.length < totalPoints) {

                    var prev = data.length > 0 ? data[data.length - 1] : 50,
                        y = prev + Math.random() * 10 - 5;

                    if (y < 0) {
                        y = 0;
                    } else if (y > 100) {
                        y = 100;
                    }

                    data.push(y);
                }

                // Zip the generated y values with the x values

                var res = [];
                for (var i = 0; i < data.length; ++i) {
                    res.push([i, data[i]]);
                }

                return res;
            }
            // Set up the control widget
            var updateInterval = 100;
            var plot = $.plot("#dashboard-chart-realtime", [getRandomData()], {
                yaxis: {
                    color: '#f3f3f3',
                    min: 0,
                    max: 100,
                    tickFormatter: function (val, axis) {
                        return "";
                    }
                },
                xaxis: {
                    color: '#f3f3f3',
                    min: 0,
                    max: 100,
                    tickFormatter: function (val, axis) {
                        return "";
                    }
                },
                colors: [themeprimary],
                series: {
                    lines: {
                        lineWidth: 0,
                        fill: true,
                        fillColor: {
                            colors: [{
                                opacity: 0.5
                            }, {
                                opacity: 0
                            }]
                        },
                        steps: false
                    },
                    shadowSize: 0
                },
                grid: {
                    hoverable: true,
                    clickable: false,
                    borderWidth: 0,
                    aboveData: false
                }
            });

            function update() {

                plot.setData([getRandomData()]);

                plot.draw();
                setTimeout(update, updateInterval);
            }
            update();


            //-------------------------Initiates Easy Pie Chart instances in page--------------------//
            InitiateEasyPieChart.init();

            //-------------------------Initiates Sparkline Chart instances in page------------------//
            InitiateSparklineCharts.init();
        });

    </script>
    
</body>
<!--  /Body -->
</html>
